<template>
	<view>
		<view class="header"></view>

		<view class="sss">
			<view class="qinadao">
				<view class="signin-header">
					<text class="signin-title">每日签到 赚积分</text>
					<text style="margin-right: -25px">签到提醒</text>
					<switch :defaultChecked="true" color="#00b578" />
				</view>
				<view class="custom-grid">
					<view class="grid-item" v-for="(item, index) in items5" :key="index">
						<image :src="item.icon" class="images" />

						<text class="texts">{{ item.title }}</text>
					</view>
				</view>
				<ant-button type="primary" onTap="handleTap">立即签到获得20积分</ant-button>
			</view>
			<view class="rules">
				<text class="rules-title">签到规则</text>
				<text>1. 签到1-7天获得的基础积分为：20积分，连续签到3天，7天可得3倍积分;</text>
				<text>2. 签到中断，累计签到天数将重新开始计算;</text>
				<text>3. 循环周期为7天，连续签到记录在第8天重新开始;</text>
				<text>4. 签到获得的积分可以兑换现金，进入钱包，1积分可兑换1分钱;</text>
			</view>
		</view>

		<view class="list">
			<view class="custom-list-item">
				<text class="custom-list-item-content">1000</text>
				<text class="jifen">积分</text>
				<text class="custom-list-item-extra">积分兑现金 ></text>
				<image class="custom-list-item-arrow" src="/static/miniprogram/pages/qiandao/path/to/arrow-icon.png" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				// items5: [{
				// 	title: '+20',
				// 	icon: 'https://pic.imgdb.cn/item/667d2173d9c307b7e95f4b93.png'
				// }, {
				// 	title: '+20',
				// 	icon: 'https://pic.imgdb.cn/item/667d2173d9c307b7e95f4b93.png'
				// }, {
				// 	title: '3倍',
				// 	icon: 'https://pic.imgdb.cn/item/667d21eed9c307b7e9602231.png'
				// }, {
				// 	title: '+20',
				// 	icon: 'https://pic.imgdb.cn/item/667d2173d9c307b7e95f4b93.png'
				// }, {
				// 	title: '3倍',
				// 	icon: 'https://pic.imgdb.cn/item/667d2173d9c307b7e95f4b93.png'
				// }, {
				// 	title: '+20',
				// 	icon: 'https://pic.imgdb.cn/item/667d21eed9c307b7e9602231.png'
				// }, {
				// 	title: '惊喜',
				// 	icon: 'https://pic.imgdb.cn/item/667d221bd9c307b7e96073ff.png'
				// }]
			};
		},
		methods: {}
	};
</script>
<style>
	.header {
		height: 280px;
		background: linear-gradient(180deg, #4382ff 52%, #d3e2ff 110%);
	}

	.list {
		margin-top: -534px;
	}

	.headerchild1 {
		height: 40px;
		background-color: cornsilk;
		padding-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ant-list-item-content-main {
		font-size: 29px;
	}

	.sssss {
		background-color: #4382ff;
	}

	.points {
		font-size: 36rpx;
		font-weight: bold;
	}

	.sss {
		margin: -132px 8px 0px;
	}

	.points-label {
		font-size: 24rpx;
	}

	.qinadao {
		background-color: white;
		height: 240px;
		border-radius: 18px;
		padding: 5px 10px 2px;
	}

	.signin-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-top {
		height: 66px;
		transform: inherit;
		transform: translateY(50px);
	}

	.signin-title {
		margin-top: 20px;
		margin-bottom: 30px;
		font-size: 24px;
		font-weight: 400;
	}

	.init {
		margin-right: 20px;
	}

	.images {
		margin-top: -5px;
		height: 24px;
		margin-bottom: 6px;
		margin-left: 4px;
		width: 24px;
	}

	.texts {
		font-size: 12px;
		text-align: center;
	}

	.rules {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10px;
		margin-top: 20rpx;
	}

	.rules-title {
		font-size: 30rpx;
		font-weight: bold;
		color: black;
		margin-bottom: 10rpx;
	}

	.rules text {
		color: #87898f;
		display: block;
		margin-bottom: 10rpx;
	}

	.custom-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 18px;
	}

	.grid-item {
		width: calc(13.5% - 16px);
		margin-bottom: 16px;
	}

	.grid-item:nth-child(8n) {
		margin-right: 0;
	}

	.custom-list-item {
		background-color: #4382ff;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-radius: 5px;
	}

	.custom-list-item-content {
		font-size: 32px;
	}

	.custom-list-item-extra {
		font-size: 16px;
		margin-right: -155px;
	}

	.jifen {
		margin-left: -127px;
	}

	.custom-list-item-arrow {
		width: 20px;
		height: 20px;
	}
</style>